<template>
	<view class="titleArea">
		<view :class="[{ hasError }]">
			<uv-form-item prop="title" ref="itemInputTitleRef">
				<uv-input :value="modelValue"
					:placeholder="`标题（必填, ${rules.title.min}-${rules.title.max}个字）`" border="none"
					placeholderClass="customInputPlaceholder" fontSize="30rpx" @change="change">
					<template v-slot:suffix class="">
						<view class="suffix">
							<text
								:class="[{ overstep: modelValue.length > rules.title.max }]">{{ modelValue.length }}</text>/{{ rules.title.max }}
						</view>
					</template>
				</uv-input>
			</uv-form-item>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		toRef,
		watch,
		inject,
		computed,
	} from 'vue'

	const rules = inject('rules')

	const props = defineProps({
		modelValue: {
			type: String,
			default: '0'
		}
	})
	const modelValue = toRef(props, 'modelValue')
	const emit = defineEmits(['update:modelValue'])

	const change = (val) => {
		emit('update:modelValue', val)
	}
	
	// 通过formItem内部的message来判断当前是不是存在error
	const itemInputTitleRef = ref(null)
	const hasError = computed(() => {
		return itemInputTitleRef?.value?.message
	})
</script>

<style lang="scss">
	.titleArea {
		padding: 0 30rpx;
		border-radius: 10rpx;
		overflow: hidden;

		>view {
			padding: 19rpx;
			background: #fff;
			border: 1px solid #fff;
		}
		
		.hasError {
			border: 1px dashed #f56c6c;
		}

		.overstep {
			color: #f56c6c;
		}
		
		.suffix {
			color: #909193;
		}
	}
</style>